<template>
  <q-drawer
    v-model="leftDrawerOpen"
    show-if-above
    bordered
    content-class="bg-white"
    :width="240"
  >
    <q-list dense>
      <q-item clickable>
        <q-item-section avatar>
          <q-avatar color="grey" text-color="white">
          </q-avatar>
        </q-item-section>

        <q-item-section>
          <q-item-label>admin</q-item-label>
          <q-item-label caption lines="1">管理员</q-item-label>
        </q-item-section>

        <q-item-section side>
          <q-icon name="chevron_right"/>
        </q-item-section>
      </q-item>
    </q-list>
    <div class="q-ma-xs">
      <drawer-list v-if="trees.length>0" :trees="trees"/>
    </div>
  </q-drawer>
</template>

<script>
  import DrawerList from '../components/drawer/Index'
  import { menu } from '../api/sys/menu'

  export default {
    name: 'MyDrawer',
    components: {
      DrawerList,
    },
    data () {
      return {
        leftDrawerOpen: true,
        trees: []
      }
    },
    created () {
      menu().then(result => {
        this.trees = result.data.data
      })
    }
  }
</script>

<style scoped lang="sass">
  .q-toolbar
    background-color: rgb(76, 87, 130)
</style>
